<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>编辑角色</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" th:href="@{/layuiadmin/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/layuiadmin/style/admin.css}" media="all">
    <script th:src="@{/layuiadmin/layui/layui.js}"></script>
    <style>
        .x-red {
            color: red;
        }
    </style>
</head>

<body>
<div class="layui-fluid">
    <div class="layui-row">
        <form action="" method="post" class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <label for="roleName" class="layui-form-label">
                    <span class="x-red">*</span>角色名
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="roleName" name="roleName" required=""
                           lay-verify="required"
                           autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div id="test12" class="demo-tree-more"></div>
            <br/>
            <div class="layui-form-item layui-hide">
                <input type="button" lay-submit lay-filter="layuiadmin-app-form-add" id="layuiadmin-app-form-add"
                       value="确认编辑">
            </div>
        </form>
    </div>
</div>

<script>
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'tree'], function () {
        var tree = layui.tree,
            layer = layui.layer,
            util = layui.util,
            form = layui.form,
            $ = layui.jquery,
            data = [];
        $.ajaxSetup({
            async: false
        });
        $.post("/system/permission/allTree", function (res) {
            console.log(res);
            data = res.data;
        });


        //基本演示
        tree.render({
            elem: '#test12',
            data: data,
            showCheckbox: true, //是否显示复选框
            showLine: false,
            id: 'demoId1'
        });

        var ids = "";

        function appendId(objList) {
            $.each(objList, function (index, obj) {
                ids += obj.id + ",";
                if (obj.children != undefined) {
                    appendId(obj.children)
                }
            });
        }


        form.on('submit(layuiadmin-app-form-add)',
            function (data) {
                var checkedData = tree.getChecked('demoId1'); //获取选中节点的数据
                ids = "";
                appendId(checkedData);
                if (ids.split(',').length <= 2) {
                    layer.alert("至少要包含两个权限", {
                        icon: 3
                    });
                    return false;
                }
                layer.confirm("是否确认保存", function () {
                    layer.load(2);
                    $.ajax({
                        url: "addRole",
                        method: "POST",
                        data: {
                            "roleName": $("#roleName").val(),
                            "ids": ids
                        },
                        success: function (res) {
                            layer.closeAll();
                            if (res.code == 0) {
                                layer.msg('保存成功', {
                                    icon: 1,
                                    time: 1000
                                }, function () {
                                    var index = parent.layer.getFrameIndex(window.name);
                                    parent.layui.table.reload('LAY-app-content-list');
                                    parent.layer.close(index);
                                });
                            } else {
                                layer.alert(res.message, {
                                    icon: 2
                                });
                            }
                        },
                        error: function () {
                            layer.closeAll();
                            layer.alert("系统异常", {
                                icon: 2
                            });
                        }
                    });


                });
                return false;
            });
    })
</script>


</body>

</html>